<template>
  <div>
    <fieldset class="fieldset_title">
      <legend class="legend_title">基础信息</legend>
      <table class="myTable">
        <tr>
          <td>计划名称</td>
          <td>{{infoObj.planName}}</td>
          <td>计划编号</td>
          <td>{{infoObj.planCode}}</td>
        </tr>
        <tr>
          <td>计划开始时间</td>
          <td>{{parseTime(infoObj.planBeginTime)}}</td>
          <td>计划结束时间</td>
          <td>{{parseTime(infoObj.planEndTime)}}</td>
        </tr>
        <tr>
          <td>所属部门</td>
          <td>{{infoObj.deptName}}</td>
          <td>负责人</td>
          <td>{{infoObj.nickname}}</td>
        </tr>

        <tr>
          <td>创建人</td>
          <td>{{infoObj.creator}}</td>
          <td>创建时间</td>
          <td>{{parseTime(infoObj.createTime)}}</td>
        </tr>

        <tr>
          <td>巡检类型</td>
          <td></td>
          <td>巡检周期</td>
          <td>{{selectDictLabel(infoObj.planPeriodVal)}}</td>
        </tr>

        <tr>
          <td>任务有效时间</td>
          <td>{{selectDictLabel(infoObj.planValidTimeVal)}}</td>
          <td>提前提醒时间 </td>
          <td>{{selectDictLabel(infoObj.planRemindTimeVal)}}</td>
        </tr>


        <tr>
          <td>提前生成时间</td>
          <td colspan="3">{{selectDictLabel(infoObj.planAdvanceTimeVal)}}</td>
        </tr>

        <tr>
          <td>是否启用</td>
          <td>{{infoObj.planEnable==1?"是":"否"}}</td>
          <td>下次生成任务</td>
          <td>--</td>
        </tr>


        <tr>
          <td>巡检设置</td>
          <td colspan="3">--</td>
        </tr>

        <tr>
          <td>说明</td>
          <td colspan="3">--</td>
        </tr>
      </table>
    </fieldset>

    <fieldset class="fieldset_title">
      <legend class="legend_title">负责人</legend>

      <el-table v-loading="user.loading" :data="user.list" :default-sort="{prop: 'id', order: 'descending'}">
        <el-table-column label="序号" align="center" sortable prop="id" />
        <el-table-column label="名称" align="center" sortable prop="emqName" />
        <el-table-column label="性别" align="center" sortable prop="sex" >
          <template slot-scope="scope">
            <span>{{scope.row.sex==1?"男":"女"}}</span>
          </template>
        </el-table-column>
        <el-table-column label="证书" align="center" sortable prop="certification" />
      </el-table>
      <!-- 分页组件 -->
      <pagination v-show="user.total > 0" :total="user.total" :page.sync="user.queryParams.pageNo"
        :limit.sync="user.queryParams.pageSize" @pagination="getUserList" />

    </fieldset>

    <fieldset class="fieldset_title">
      <legend class="legend_title">巡检路线</legend>

      <el-table v-loading="imei.loading" :data="imei.list" :default-sort="{prop: 'id', order: 'descending'}">
        <el-table-column label="序号" align="center" sortable prop="id" />
        <el-table-column label="设备编号" align="center" sortable prop="assetNo" />
        <el-table-column label="名称" align="center" sortable prop="equName" />
        <el-table-column label="所属部门" align="center" sortable prop="deptName" />
        <el-table-column label="类别" align="center" sortable prop="typeName" />
        <el-table-column label="规格型号" align="center" sortable prop="specification" />
        <el-table-column label="位置" align="center" sortable  />
      </el-table>
      <!-- 分页组件 -->
      <pagination v-show="imei.total > 0" :total="imei.total" :page.sync="imei.queryParams.pageNo"
        :limit.sync="imei.queryParams.pageSize" @pagination="getImeiList" />

    </fieldset>
  </div>
</template>

<script>
  import {
    getPollingPlanMyList,getPollingPlanUserlsList,getPollingPlanMyDetailsList
  } from "@/api/polling/pollingPlan";

  export default {
    name: "PollingPlan",
    components: {},
    data() {
      return {
        id:null,
        pid:null,
        imei: {
          list: [],
          loading: false,
          queryParams: {
            pageNo: 1,
            pageSize: 10
          },
          total: 0
        },infoObj:{},
        planEnableList: [{
            id: 1,
            value: 0,
            lable: "否"
          },
          {
            id: 2,
            value: 1,
            lable: "是"
          }
        ],
        dataSectionList: [ //放数据字典
          {
            id: 0,
            lable: "1时"
          },
          {
            id: 1,
            lable: "3时"
          },
          {
            id: 2,
            lable: "1日"
          },
          {
            id: 3,
            lable: "3日"
          },
          {
            id: 4,
            lable: "1周"
          },
          {
            id: 5,
            lable: "1月"
          },
          {
            id: 6,
            lable: "3月"
          },
          {
            id: 7,
            lable: "6月"
          },
          {
            id: 8,
            lable: "12月"
          }
        ],
        user: {
          list: [],
          loading: false,
          queryParams: {
            pageNo: 1,
            pageSize: 10
          },
          total: 0
        }
      }
    },mounted() {
      this.id = this.$route.query.uid;
      this.pid=this.$route.query.tid;
      this.initData();
    },
    methods: {
      selectDictLabel(value) {
        var datas = this.dataSectionList;
        let index = datas.findIndex(item => item.id == value)
        if (index != -1) {
          return datas[index].lable;
        }
        return value;
      },
      initData(){
        getPollingPlanMyList({id:this.id}).then(res=>{
          console.log("res",res)
          let list=res.data.list;
          if(list !=undefined && list !=null && list.length > 0){
            this.infoObj=list[0];
          }

        });
        this.getUserList();
        this.getImeiList();
      },
      getUserList() {
        getPollingPlanUserlsList(this.id).then(res=>{
          this.user.list=res.data.list;
          this.user.total=res.data.total;

          console.log("getUserList",res)
        });
      },
      getImeiList() {
        getPollingPlanMyDetailsList({id:this.pid}).then(res => {
          console.log("getImeiList",res)
          this.imei.list=res.data.list;
          this.imei.total=res.data.total;
        });
      }
    }
  }
</script>

<style>
  .legend_title {
    font-size: 16px;
    color: #05A380;
    padding: 10px 0px;
    font-weight: 700;
  }

  .fieldset_title {
    margin-top: 20px;
  }


  .myTable td {
    border: 1px solid #DCDFE6;
    width: 11em;
    text-align: center;
    line-height: 28px;
  }

  .myTable {
    box-sizing: border-box;
    border-spacing: 0;
    border-collapse: collapse;
    border-spacing: 2px;
    border-color: grey;
    table-layout: fixed;
    border-collapse: collapse !important;
    width: 100%;
    max-width: 1000px;
    max-width: 700px;
    margin-top: 10px;
    font-size: 12px;
  }
</style>
